import { defineComponent } from 'vue';
import { getRawProps } from '@ibiz-template/vue3-util';
import { Controller } from '../list-Icon/controller';

export const ListText = defineComponent({
  name: 'ListText',
  props: getRawProps<Controller>(),
  setup(props) {
    const _name: string = props.controller.model.id || '';
    let _value = '';
    if (props.controller.data) {
      _value = props.controller.data[_name];
      if (_value) {
        _value = _value
          .replaceAll('.【', '【')
          .replaceAll('【', function (searchValue: string, index: number) {
            let tempstr = `<span style='min-width:200px'><span style='color: var(--ibiz-color-primary)'>`;
            if (index > 0) {
              tempstr = `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style='min-width:200px'><span style='color: var(--ibiz-color-primary)'>`;
            }
            return tempstr;
          })
          .replaceAll('】', '</span>&nbsp;&nbsp;</span>');
        if (_value[_value.length - 1] === '.') {
          _value = _value.slice(0, -1);
        }
      }
    }
    return {
      _name,
      _value,
    };
  },
  render() {
    return this._value ? (
      <div class='list-text' v-html={this._value}></div>
    ) : null;
  },
});
